<template>
  <header>
  <img src="../../image/2.jpg" alt="">
  <h1 @click="$router.push('/index/Content#').catch(e=>e)">{{title}}</h1>
  <i class="el-icon-search"></i>
<el-input
  type="text"
  placeholder="请输入内容"
  maxlength="10"
  show-word-limit
>
</el-input>
<el-menu  mode="horizontal" >
  <el-menu-item v-for="item in lists" :index="item._id"  :key="item._id" @click="setClass(item.className)" >{{item.className}}</el-menu-item>
</el-menu>
  <span @click="login" v-if="!userLogin">登陆</span>
  <span v-if="userLogin" class="headportrait"><el-avatar v-if="userLogin" :size="50" :src="circleUrl"></el-avatar><span  @click="Exit">退出</span></span>
  <input v-if="userLogin" ref="file" type="file" class="file" @change="addImg">
  </header>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
import {radioBoxs,session,userImg,updateImg,classId,classContent,logout} from '@/service/getData.js'
import {imgUrl} from '@/config/env.js'
import axios from 'axios'
export default {
  data() {
    return{
      _id:'',
      lists:[],
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      img:'',
      thisData:[],
    }
  },
  methods:{
    ...mapMutations(['REMOVESTOR','USERLOGIN','ADDINDEXDATA','SETLOADING']),
    Exit(){
      logout(this.userInfo._id);
      localStorage.removeItem('token');
      this.$router.push('/index/indexLogin');
    },
    initData(){
      radioBoxs().then((data) => {
      this.lists=data.data.data;
      })
      },
    login(){
      this.SETLOADING(false);
      this.$router.push('/index/indexLogin');
    },
    async addImg(){
      let formData = new FormData();
       formData.append('wsvatar', this.$refs.file.files[0]);
       await axios.post('http://localhost:8080/api/content/upload',formData).then((data) =>{
         this.img=data.data;
        });
        this.circleUrl=imgUrl+this.img;
        updateImg(this._id,this.img);
    },
    setClass(val){
    
    classId(val).then((data) => {
      classContent(data.data._id).then((data) => {
        this.thisData=data.data;
        this.thisData.some(item => {
          item.img=imgUrl+item.img;
        })
        this.ADDINDEXDATA(this.thisData);
      })
    })  
    this.$router.push('/index/Content#').catch((e) => e);
    }
  },
  props:['title','bool'],
  async created(){
   this.initData();
  session( localStorage.getItem('token')).then((data) => {
     if(data.data.status ==='200'){
    userImg(data.data._id).then((data) => {
          this._id=data.data._id;
         if(data.data.img){
           console.log(data.data.img)
           this.circleUrl=imgUrl+data.data.img;
         }
       })
        this.USERLOGIN(true);
     }else{
       this.USERLOGIN(false);
     }
   })
  },
  computed:{
    ...mapState(['userLogin','userId','userInfo'])
  }
}
</script>

<style lang="scss" scoped>
  @import "@/style/mixin.scss";
  header {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    img{
      @include wh(100px,100px);
    }
    h1{
      display: inline-block;
    }
    span{
      cursor: pointer;
      position: absolute;
      right: 1.5rem;
      width: 150px;
      display:flex;
      align-items: center;
      justify-content: center;
    }
    .file{
      position: absolute;
      right:40px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color:red;
      opacity: 0;
    }
    i{
      margin-left:100px;
    }
    .el-input{
      width: 200px;
    }
    .el-menu{
      position: absolute;
      right:200px;
      border: none;
      .el-menu-item{
        margin-left:20px;
      }
    }
    .headportrait:hover .news{
         
      position: absolute;
      top:0;
      background-color:red;
      left:10px;
      display: block;
    }
     .news{
      position: absolute;
      top:0;
      background-color:red;
      left:10px;
      display: none;
    }
  }

</style>